<div [formGroup]="configuration.formGroupReference">
    <label class="row">
        <span *ngIf="configuration.showLabel" class="col-12 col-form-label">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </span>
        <span class="col-12">
            <textarea
                type="textarea"
                [formControlName]="configuration.formControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }}"
                [required]="configuration.required"
                [minlength]="configuration.minlength"
                [maxLength]="currentMaxLength"
                [cols]="cols"
                [rows]="rows"
                #textarea
            ></textarea>
            <div class="row">
                <app-form-input-error
                    class="invalid-feedback col"
                    [formGroupReference]="configuration.formGroupReference"
                    [formControlId]="configuration.formControlId"
                >
                </app-form-input-error>
                <span *ngIf="countdown" class="col text-right">
                    <small>
                        <em>
                            {{ "productdetail.character.remain" | translate }}
                            {{ currentMaxLength - textarea.value.length }}
                        </em>
                    </small>
                </span>
            </div>
        </span>
    </label>
</div>
